<!--
 * @Author: your name
 * @Date: 2021-02-22 20:54:54
 * @LastEditTime: 2021-02-23 09:58:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_tree_transfer\src\App.vue
-->
<template>
  <div id="app">
    <div class="tree">
      <!-- 组件大小由tree div 控制 -->
      <!-- defaultProps 树形结构的字段配置 与element一致 -->
      <!-- data 树形结构的数据 -->
      <!-- getOptionNode 结果接收函数，返回一个参数则是树形结构右侧节点的数组 -->
      <TreeTransfer @getOptionNode="getOptionNode"></TreeTransfer>
    </div>
  </div>
</template>

<script>
  import TreeTransfer from "./components/TreeTransfer";
  export default {
    name: "App",
    components: {
      TreeTransfer,
    },
    methods: {
      getOptionNode(data) {
        /* 输出添加到右边结果 */
        console.log(data, "结果");
      },
    },
  };
</script>

<style lang="scss">
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #app {
    width: 100vw;
    height: 100vh;
    .tree {
      width: 550px; //1.5
      height: 300px; //1
    }
  }
</style>
